<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>html5 canvas</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<script>
var jq = jQuery.noConflict();
</script>
<!-- <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> -->
<script src="js/canvasquery.js"></script>
<script src="js/canvasquery.framework.js"></script>
</head>

<body>

	 <img id="test" src="images/index.png" width="100%" height="100%">

<script>
function p(a){console.log(a);}
jq("#test").hide();
cq("#test").framework({

  /* game loop using requestAnimationFrame */
  onstep: function(delta, time) { },

  /* same as above - provided if you want to separate logic from rendering */
  onrender: function(delta, time) { },

  /* window resize */
  onresize: function(width, height) { },

  /* mouse events */
  onousedown: function(x, y) { },
  onmouseup: function(x, y) { },
  onmousemove: function(x, y) { },
  onmousewheel: function(delta) { },

  /* touch events */
  ontouchstart: function(x, y, touches) { },
  ontouchend: function(x, y, touches) { },
  ontouchmove: function(x, y, touches) { },

  /* keyboard events */
  onkeydown: function(key) { },
  onkeyup: function(key) { },

  /* gamepad events (chrome only) */
  ongamepaddown: function(button, gamepad) { },
  ongamepadup: function(button, gamepad) { },
  ongamepadmove: function(xAxis, yAxis, gamepad) { },

  ondeviceorientation: function(alpha, beta, gamma) { },

  /* user drops image from disk */
  ondropimage: function(image) { }

}).appendTo("body");
</script>

</body>
</html>